<template>
  <div class="order">
    <div class="order_bg"></div>
    <div class="wrapper" v-if="loanOrderList.length !== 0">
      <div class="card_box" v-for="item in loanOrderList" @click="handleClick(item)" :key="item.loanRecordId"
           :class="orderStatus(item)">
        <div class="tags">{{ item.approvalResultStr }}</div>
        <div class="content">
          <div class="money">
            <img class="image" src="../../assets/icon_order_loan_money.png">
            <span>{{ $t('loan_money') }}</span>
            <span class="num">{{formatterMoney(item.loanAmount) }}</span>
          </div>
          <div class="date ">
            <span>{{ $t('loan_time') }}</span>
            <span class="date_text">{{ item.loanTime }}</span>
          </div>
        </div>
        <div class="tips">{{ item.message }}</div>
      </div>
    </div>
    <div class="no_content" v-else>
      <img class="image" src=".././../assets/icon_order_empty.png">
      <div class="loan_not">{{ $t('loan_not') }}</div>
      <div class="confirm">
        <button class="button" @click="$router.push('/home/index')">{{ $t('loan_go') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import {computed, ref} from 'vue'
import router from "@/router";
import {fetchMyLoanRecord} from '@/api/order'
import {useStore} from "vuex";
import {formatMoney} from "@/utils/tool";

export default {
  setup() {
    const loanOrderList = ref([])
    const store = useStore()
    const handleClick = async ({loanRecordId}) => {
      router.push({
        path: '/orderDetails',
        query: {
          loanRecordId: loanRecordId
        }
      })
    }
    const orderStatus = ({approvalResult}) => {
      let color
      if ([8, -1].indexOf(approvalResult) !== -1) {
        color = {red: true}
      } else if ([2, 9].indexOf(approvalResult) !== -1) {
        color = {gray: true}
      } else {
        color = {green: true}
      }
      return color
    }
    const fetchLoanOrder = async () => {
      const res = await fetchMyLoanRecord()
      loanOrderList.value = res.data
    }
    if (localStorage.getItem('userId')) {
      fetchLoanOrder()
    }
    store.dispatch('changeLoading', false)
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    return {
      loanOrderList,
      orderStatus,
      handleClick,
      formatterMoney
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  width: 100%;
  position: relative;
  height: calc(100vh - 50px);
  overflow: auto;

  .green {
    background: linear-gradient(268deg, #2CB222, #49961F) !important;

    .tags {
      color: #49961F !important;
    }
  }

  .red {
    background: linear-gradient(268deg, #FE8B83, #FC565E) !important;

    .tags {
      color: #FC565E !important;
    }
  }

  .gray {
    background: linear-gradient(268deg, #a3a7b4, #8b8c93) !important;

    .tags {
      color: #B3B3B3 !important;
    }
  }

  .order_bg {
    position: absolute;
    width: 100%;
    height: 150px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
    background-color: #F7F7F7;

  }

  .order_bg::before {
    width: 140%;
    height: 120px;
    position: absolute;
    left: -20%;
    top: 0;
    content: '';
    border-radius: 0 0 50% 50%;
    z-index: -1;
    background-color: #FF5A50;
  }

  .wrapper {
    position: relative;
    top: 60px;
    bottom: 20px;
    width: 100%;
    z-index: 20;
    left: 50%;
    transform: translateX(-50%);

    .card_box {
      width: 330px;
      border-radius: 5px;
      background: #FFFFFF;
      margin: 0 auto;
      box-shadow: 0px 7px 43px 0px rgba(30, 30, 30, 0.05);
      display: flex;
      background: linear-gradient(268deg, #2CB222, #49961F);
      height: 118px;
      color: #FFFFFF;
      position: relative;
      overflow: hidden;
      margin-bottom: 15px;

      .tags {
        background-color: #FFFFFF;
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #2CB222;
        position: absolute;
        text-align: center;
        transform: translate(120px, 22px) rotate(35deg);
        font-size: 14px;
      }

      .content {
        margin-top: 40px;
        width: 100%;
        margin-left: 10px;
        text-align: left;

        .money {
          font-size: 11px;

          span {
            margin-left: 7px;
          }

          .num {
            font-size: 18px;
          }

          .image {
            height: 11px;
            width: 11px;
          }

        }

        .date {
          font-size: 11px;
          padding-left: 10px;
          box-sizing: border-box;

          span {
            margin-left: 7px;
          }

          .date_text {
            font-size: 11px;
          }
        }
      }

      .tips {
        position: absolute;
        bottom: 5px;
        font-size: 11px;
        width: 100%;
        text-align: center;
      }
    }
  }

  .no_content {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, -50%);
    text-align: center;

    .image {
      width: 138px;
      height: 170px;
      z-index: 99;
    }

    .loan_not {
      color: #BBBCBC;
      font-size: 13px;
    }

    .confirm {
      margin-top: 20px;
      text-align: center;

      button {
        width: 200px;
        padding: 5px 0;
        color: #ffffff;
        border: none;
        font-size: 16px;
        background: linear-gradient(-45deg, #FF5252, #FF8C3C);
        box-shadow: 0px 4px 10px 0px rgba(255, 92, 78, 0.52);
        border-radius: 29px;
      }

    }
  }
}


</style>
